<!DOCTYPE html>
<html>
<head>
	<title>闭包计数器</title>
	<meta charset="utf-8">
	<script type="text/javascript">
		// 简单闭包
		// var a = 10;
		// function bao(){
		// 	console.log(a);
		// }
		// bao();

		// 复杂的闭包
		/*function f1(){//外层函数
			var num = 1;//局部变量
			function f2(){
				alert(num);
			}//闭包 内层函数
			return f2;//千万别带小括号
		}
		var result = f1();//申明一个变量存储外层函数的调用，此处有（）,存储的是闭包即内层函数
		result();*///调用

		
		

		
	</script>
</head>
<body>
	<button id="quan">全局变量来计数</button>
	<button id="ju">局部变量来计数</button>
	<button id="bi">闭包来计数</button>

	<script type="text/javascript">
		// 1全局变量计数器  弊端：任何地方都可以更改全局变量的值，更改后，点击计数就不准确
		var count = 0;
		var quan = document.getElementById("quan");
		// console.log(quan);
		quan.onclick = function(){
			count++;
			console.log("第"+ count +"次点击");
		}
		count = 8;//更改全局变量的值后，点击计数就不准确了


		// 2局部变量来计数   每次点击，局部变量都会被重新赋值为0，故计数永远是1，效果不对
		var ju = document.getElementById("ju");
		// console.log(ju);
		// ju.onclick = function(){
		// 	var c2 = 0;//局部变量
		// 	c2++;
		// 	console.log(c2);
		// }

		// 3闭包计数  解决了全局变量计数不准确的弊端
		var bi = document.getElementById("bi");
		// console.log(bi);
			function wai(){ //外层函数
				var c3 = 0;//局部变量
				function nei(){ //内层函数  即闭包
					c3++;
					console.log(c3);
				}
				return nei;//返回内层函数值
			}

			var res = wai(); //调用外层的函数并存放在变量中
			
			bi.onclick = function(){
				res(); //点击时调用闭包
			};

			// c3 = 10;// window属性

			

		

	</script>
</body>
</html>